<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ之属性操作</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin: 20px;
        }
        .active{
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box" data-id='20'></div>
    <div class="box" data-id='20'></div>
    <div class="box" data-id='20'></div>
    <div class="box" data-id='20'></div>
    <div class="box" data-id='20'></div>
    <div class="box" data-id='20'></div>

    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox" checked = true>
    <input type="checkbox">
    <input type="checkbox">

    <button class="active" id='btn'>改变颜色</button>

    <script src="./js/jquery.3.5.1.js"></script>
    <script>
        $(function(){
            // 1. 基本属性操作
            // 1.1 增/改：不存在则新增，存在则修改
            $('.box').attr("data-id","10"); 
            // 1.2 属性值为函数
            $('.box').attr({
                // 自定义参数num为JQ操作给每个元素赋予的索引值
                'data-num':function(num){
                    // console.log(arguments[0]);
                    return num
                }
            })

            // 1.3 查：只获取所有符合中的第一个的属性值
            console.log($('.box').attr('data-num'));    // 打印0

            // 1.4 删
            $('.box').removeAttr('data-num')

            // 2. 内置属性操作
            // 2.1 查：只获取所有符合中的第一个的属性值
            console.log($('input').prop('checked'));

            // 3.类名属性操作
            $('#btn').click(function(){
                // 3.1 判断
                // 3.1.1 is()
                /* if($('#btn').is('.active')){
                    console.log('有active类名');
                } */
                // 3.1.2 hasClass() 
                /* if($('#btn').hasClass('active')){
                    console.log('有active类名');
                } */

                // 3.2 切换
                $(this).toggleClass('active');
            })
        })
    </script>
</body>
</html>